extends layout

block additional_scripts
    script(type='text/javascript').
        function delete_#{entity}(id_) {
            var f = document.getElementById('delete_form');
            if (f) {
                f.id_.value = id_;
                f.submit();
            }
        }
        function validate_#{entity}(form_name) {
            var f = document.getElementById(form_name);
            if (f) {
                var items = $("#" + form_name).find("div.input_item")
                for(var i = 0; i < items.length; i++) {
                    if ($(items[i]).find("span.required").length != 0) {
                        var item = $(items[i]).find(".control_input")[0];
                        if (item.type != 'radio') {
                            if (item.value == null || item.value == "") {
                                var txt = $(items[i]).children("span.span_input_name");
                                alert(txt.text() + ' could not be empty string');
                                return false;
                            }
                        } else {
                            if ($(item).parent().parent().find('input[type=radio]:checked').size() <= 0) {
                                var txt = $(items[i]).children("span.span_input_name");
                                alert(txt.text() + ' should be selected');
                                return false;
                            }
                        }
                    }
                }
            }
            return true;
        }
        function show_filled_update_modal(row_id, id_) {
            var f = document.getElementById('update_form');
            if (f) {
                f.id_.value = id_;
                var required_array = '#{data.info.required}'.split(',');
                var visibility_array = '#{data.info.visibility}'.split(',');
                var types_array = '#{data.info.input_subtype}'.split(',');
                var row = $('#data_table tr td:first-child').filter(function() {
                    return $(this).text() == row_id;
                }).parent();
                var input_number = -1;
                var column_number = -1;
                for (var i = 0; i < required_array.length; i++) {
                    if (visibility_array[i] === 'true') {
                        column_number++;
                    }
                    if (required_array[i] !== 'NAN') {
                        input_number++;
                        var val = $.trim(row.children("td")[column_number].innerHTML);
                        if (types_array[i] !== 'radio') {
                            $($("#update_form").find("div.input_item")[input_number]).find(".control_input")[0].value = val;
                        } else {
                            var items = $($("#update_form").find("div.input_item")[input_number]).find("label");
                            for (var j = 0; j < items.length; j++) {
                                if ($.trim($(items[j]).text()) === val) {
                                    $($("#update_form").find("div.input_item")[input_number]).find(".control_input")[j].checked = true;
                                    break;
                                }
                            }
                        }
                    }
                }
                $('#update_modal').modal('show');
            }
        }

block content
    h1 #{title}
    form#delete_form(method='post' action='#{relative_path}/delete')
        input(type='hidden' name='id_' value='')
    div
        table.table
            thead
                tr
                    each value, i in data.names
                        if data.info.visibility[i] === true
                            th= value
                    if auth
                        if auth.bool
                            th
                            th
                                span.glyphicon.glyphicon-pencil(data-toggle="modal" data-target="#create_modal" title="Create new #{entity}")
            tbody#data_table
                each row in data.data
                    tr
                        each column, i in row
                            if data.info.visibility[i] === true
                                if data.info.input_data[i] === 'NAN'
                                    td= column
                                else
                                    td= data.info.input_data[i][column - 1]
                        if auth
                            if auth.bool
                                td
                                    span.glyphicon.glyphicon-trash(onclick='delete_#{entity}(#{row[data.info.id_column]})' title="Delete #{entity}")
                                td
                                    span.glyphicon.glyphicon-folder-open(title="Edit #{entity}" onclick='show_filled_update_modal(#{row[0]}, #{row[data.info.id_column]})')
    div.paginator
        ul.pagination
            - for(var i = 1; i <= pages; i++)
                if (page + 1) == i
                    li.active: a(href='#{relative_path}/page#{i - 1}') #{i}
                else
                    li: a(href='#{relative_path}/page#{i - 1}') #{i}
    div.modal.fade#create_modal(tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true")
        div.modal-dialog
            div.modal-content
                form#create_form(method="post" action="#{relative_path}/create" onsubmit="return validate_#{entity}('create_form')")
                    div.modal-header
                        button.close(type="button" data-dismiss="modal" aria-hidden="true") &times;
                        h4.modal-title#createModalLabel New #{entity}
                    div.modal-body
                        - for(var i = 0; i < data.info.required.length; i++)
                            if data.info.required[i] !== 'NAN'
                                div.input_item
                                    span.span_input_name #{data.names[i]}
                                    span :
                                    if data.info.limit_size[i] !== 'NAN'
                                        span.badge.float-right #{data.info.limit_size[i]} symbols max
                                    if data.info.required[i] === true
                                        span.label.label-danger.float-right.required required
                                    if data.info.input_subtype[i] !== 'NAN'
                                        if data.info.input_subtype[i] === 'radio'
                                            - for(var j = 0; j < data.info.input_data[i].length; j++)
                                                br
                                                label
                                                    #{data.info.input_type[i]}.control_input(type="#{data.info.input_subtype[i]}" name="#{data.info.input_name[i]}" value="#{j + 1}") #{data.info.input_data[i][j]}
                                        else
                                            #{data.info.input_type[i]}.form-control.control_input(type="#{data.info.input_subtype[i]}" placeholder="#{data.info.tooltip[i]}" name="#{data.info.input_name[i]}")
                                    else
                                        #{data.info.input_type[i]}.form-control.control_input(placeholder="#{data.info.tooltip[i]}" name="#{data.info.input_name[i]}")
                                    br
                    div.modal-footer
                        button.btn.btn-default(type="button" data-dismiss="modal") Close
                        button.btn.btn-primary(type="submit") Create
    div.modal.fade#update_modal(tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true")
        div.modal-dialog
            div.modal-content
                form#update_form(method="post" action="#{relative_path}/update" onsubmit="return validate_#{entity}('update_form')")
                    div.modal-header
                        button.close(type="button" data-dismiss="modal" aria-hidden="true") &times;
                        h4.modal-title#updateModalLabel Change #{entity}
                    div.modal-body
                        input(type='hidden' name='id_' value='')
                        - for(var i = 0; i < data.info.required.length; i++)
                            if data.info.required[i] !== 'NAN'
                                div.input_item
                                    span.span_input_name #{data.names[i]}
                                    span :
                                    if data.info.limit_size[i] !== 'NAN'
                                        span.badge.float-right #{data.info.limit_size[i]} symbols max
                                    if data.info.required[i] === true
                                        span.label.label-danger.float-right.required required
                                    if data.info.input_subtype[i] !== 'NAN'
                                        if data.info.input_subtype[i] === 'radio'
                                            - for(var j = 0; j < data.info.input_data[i].length; j++)
                                                br
                                                label
                                                    #{data.info.input_type[i]}.control_input(type="#{data.info.input_subtype[i]}" name="#{data.info.input_name[i]}" value="#{j + 1}") #{data.info.input_data[i][j]}
                                        else
                                            #{data.info.input_type[i]}.form-control.control_input(type="#{data.info.input_subtype[i]}" placeholder="#{data.info.tooltip[i]}" name="#{data.info.input_name[i]}")
                                    else
                                        #{data.info.input_type[i]}.form-control.control_input(placeholder="#{data.info.tooltip[i]}" name="#{data.info.input_name[i]}")
                                    br
                    div.modal-footer
                        button.btn.btn-default(type="button" data-dismiss="modal") Close
                        button.btn.btn-primary(type="submit") Save